<template>
    <div class="app-container">
        <el-row v-if="userRole.indexOf('admin') > -1">
            <el-col :span="6" v-for="(item, index) in classesList">
               <div @click="toLinks(item.id)">
                   <el-card class="box-card" style="cursor: pointer;margin: 10px;background-color: #f2f6fc" >
                       <p style="font-size: 20px;">资源名称：{{item.nameZh}}</p>
                       <p style="font-size: 20px;">资源数：{{item.resourceCount || 0}}</p>
                       <!--            <el-progress :percentage="50"></el-progress>-->
                       <el-progress :stroke-width="12" :percentage="item.percentage"></el-progress>
                   </el-card>
               </div>
            </el-col>
        </el-row>
        <el-row v-else>
            <h1>欢迎您</h1>
        </el-row>
    </div>
</template>

<script>
    import {listClasses} from "@/api/system/classes";

    export default {
        name: "index",
        components: {},
        data() {
            return {
                userRole: this.$store.getters.roles,
                classesList: [],
                total: 0,
                resourceCountAll: 0
            }
        },
        mounted() {
            if(this.userRole.indexOf("admin") > -1) {
                this.getList();
            }
        },
        methods: {
            getList() {
                listClasses({}).then(response => {
                    let count = 0;
                    response.rows.map(item => {
                        count += parseInt(item.resourceCount || 0)
                    })
                    this.resourceCountAll = count;
                    this.classesList = response.rows.map(item => {
                        return {
                            percentage: count==0?0:parseInt((item.resourceCount || 0) * 100 / count),
                            ...item
                        }
                    })
                    this.total = response.total;

                });
            },
            toLinks(classesId) {
                this.$router.push({path: "/knowledgeBaseManagement/dynamic/" + classesId});
            }
        }
    }
</script>

<style scoped>
    .box-card {
        width: 400px;
    }
</style>
